<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        input[type="button"] {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }
        #display {
            width: 200px;
            height: 50px;
            font-size: 24px;
            text-align: right;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <input type="text" id="display" readonly>
    <br>
    <input type="button" value="7" onclick="appendToDisplay('7')">
    <input type="button" value="8" onclick="appendToDisplay('8')">
    <input type="button" value="9" onclick="appendToDisplay('9')">
    <input type="button" value="+" onclick="appendToDisplay('+')">
    <br>
    <input type="button" value="4" onclick="appendToDisplay('4')">
    <input type="button" value="5" onclick="appendToDisplay('5')">
    <input type="button" value="6" onclick="appendToDisplay('6')">
    <input type="button" value="-" onclick="appendToDisplay('-')">
    <br>
    <input type="button" value="1" onclick="appendToDisplay('1')">
    <input type="button" value="2" onclick="appendToDisplay('2')">
    <input type="button" value="3" onclick="appendToDisplay('3')">
    <input type="button" value="*" onclick="appendToDisplay('*')">
    <br>
    <input type="button" value="0" onclick="appendToDisplay('0')">
    <input type="button" value="C" onclick="clearDisplay()">
    <input type="button" value="=" onclick="calculateResult()">
    <input type="button" value="/" onclick="appendToDisplay('/')">

    <script>
        let displayValue = '';

        function appendToDisplay(value) {
            displayValue += value;
            document.getElementById('display').value = displayValue;
        }

        function clearDisplay() {
            displayValue = '';
            document.getElementById('display').value = '';
        }

        function calculateResult() {
            try {
                const result = eval(displayValue);
                document.getElementById('display').value = result;
                displayValue = String(result);
            } catch (error) {
                document.getElementById('display').value = 'Error';
                displayValue = '';
            }
        }
    </script>
</body>
</html>